<template>
    <div class="loginArea">
        <div class="preInp">
            <div class="titleLogin">
                <div class="loginImg">
                    <span class="icon iconfont " style="font-size:3em;">&#xe600;</span>
                </div>

            </div>
            <input class="inpLogin" type="text" placeholder="请输入用户名">
            <input class="inpLogin" type="password" placeholder="请输入密码">
            <div class="btnLogin">登录</div>
        </div>
    </div>
</template>

<script>
    import Input from "muse-ui/es5/internal/mixins/input";
    export default {
        name: "login",
        components: {Input}
    }
</script>

<style scoped>
.loginArea{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background:url(../../assets/image/cc1.png)no-repeat;
    background-size:auto 100%;
    overflow: hidden;
}
.loginArea:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 2;}

    .preInp{
        width:80%;
        height:auto;
        position: absolute;
        z-index:9;
        margin:30% 0% 0 10%;
        color:#fff;
        border-radius: 10px;
    }
    .titleLogin{
        width:100%;
        height:auto;
        text-align: center;

    }
    .loginImg{
        width:60px;
        height:60px;
        background:rgba(255,255,255,0.4);
        border-radius: 50%;
        margin:20px auto;
    }
    .inpLogin{
        width:100%;
        height:36px;
        line-height:36px;
        border:none;
        background:none;
        border:solid 1px #fff;
        border-radius:20px;
        margin-top:20px;
        padding:0 5%;
        outline: none;
        color:#fff;
        background:rgba(255,255,255,0.5);

    }
.inpLogin::-webkit-input-placeholder { /* WebKit browsers */

    color: #fff;
}
.inpLogin:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
}
.inpLogin::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
}
.inpLogin:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
}
    .btnLogin{
        width:100%;
        height:40px;
        line-height:40px;
        font-size:1.2em;
        background:#2196f3;
        color:#fff;
        border-radius:20px;
        margin-top:20px;
    }

</style>